<template>
  <div>
    <router-view></router-view>
    <Foot :toUrl="toUrl" v-if="state.show"/>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import Foot from './components/Foot.vue';
import { useRouter } from 'vue-router';
// 储存路由跳转的路径，传给底部导航栏
const toUrl = ref('')
// 路由白名单，如果路径是这个则不展示底部导航栏
const state = reactive({
  whiteList: ['/login'],
  show: true
})
const router = useRouter()
router.beforeEach((to, from, next) => {
  state.show = !state.whiteList.includes(to.path)  
  // console.log(state.show);
  
  toUrl.value = to.path
  // console.log(toUrl.value);
  next()
})
</script>

<style lang="less" scoped>
div{
  height: 100vh;
  background-color: #F9FAFB;
}
</style>